<script lang="ts">
	import { onDestroy, onMount } from 'svelte';
	import Picture from '$components/basic/picture/picture.svelte';
	import IconButton from '@smui/icon-button';
	import { classMap } from '@smui/common/internal';

	export let images: { url?: string; name: string }[] = [{ url: '', name: '' }];
	export let style = '';
	export let duration = 3;
	export let len = 1;

	let currentIndex = 0;
	let arrowDirection = 1;
	let internalStyle = {
		left: '0;',
		width: `calc(var(--item-width) * ${images.length});`,
		transition: 'all 0.5s ease-in-out;'
	};
	let animationTimeOut: NodeJS.Timeout | undefined = undefined;

	const frame = () => {
		currentIndex = (images.length + currentIndex + arrowDirection) % images.length;
		internalStyle.left = `calc(var(--item-width) * ${currentIndex} * -1)`;
	};

	function circle() {
		clearInterval(animationTimeOut);
		animationTimeOut = setInterval(frame, 1000 * duration);
	}

	function toLeft() {
		clearInterval(animationTimeOut);
		arrowDirection = -1;
		frame();
		arrowDirection = 1;
		circle();
	}

	function toRight() {
		clearInterval(animationTimeOut);
		arrowDirection = 1;
		frame();
		circle();
	}

	onMount(() => {
		images.length > 1 && circle();
	});

	const clearAnimation = () => clearInterval(animationTimeOut);

	onDestroy(clearAnimation);
</script>

<div class="carousel overflow-hidden relative" style={style + ';--preview-len: ' + len + ';'}>
	<div
		class="w-60px h-60px absolute left-5px top-1/2 -translate-y-1/2 z-999 opacity-0 hover:opacity-100 transition-opacity duration-300"
	>
		<IconButton
			class="material-symbols-outlined color-blue-7 w-60px h-60px font-size-30px! font-bold"
			on:click={toLeft}>arrow_circle_left</IconButton
		>
	</div>
	<div
		class="w-60px h-60px absolute right-5px top-1/2 -translate-y-1/2 z-999 opacity-0 hover:opacity-100 transition-opacity duration-300"
	>
		<IconButton
			class="material-symbols-outlined color-blue-7 w-60px h-60px font-size-30px! font-bold"
			on:click={toRight}>arrow_circle_right</IconButton
		>
	</div>
	<div
		class="carousel-cursor cursor-list w-60% flex-cc absolute bottom-15px left-50% -translate-x-1/2 z-999 gap-5px"
	>
		{#each Array(images.length).fill('') as _unused, cursor}
			<div
				class={classMap({
					'carousel-cursor__item': true,
					'carousel-cursor__item--active': cursor === currentIndex
				})}
			></div>
		{/each}
	</div>
	<div
		class="carousel-wrapper flex flex-row"
		style={Object.entries(internalStyle)
			.map(([key, value]) => `${key}: ${value}`)
			.join(';')
			.concat(style)}
	>
		{#each images as item}
			<div style="--i: 1" class="h-full flex-cc carousel-item">
				<Picture class="h-full aspect-ratio-1/1" src={item.url} alt={item.name}></Picture>
			</div>
		{/each}
	</div>
</div>

<style lang="scss">
	.carousel {
		--item-width: 400px;
		--item-height: var(--item-width);
		--offset-x: var(--item-width);
		--preview-len: 1;
		--i: 0;

		height: var(--item-height);
		width: calc(var(--item-width) * var(--preview-len));

		&-wrapper {
			position: absolute;
			height: var(--item-height);
			top: 0;
			left: 0;
			width: var(--item-width);
		}

		&-item {
			height: var(--item-height);
			width: var(--item-width);
			// background: #ccc;
		}

		&-cursor {
			--h-cursor: 6px;

			height: var(--h-cursor);

			&__item {
				width: 40px;
				background-color: #f3f4f6;
				height: var(--h-cursor);

				&--active {
					background-color: #9ca3af;
				}
			}
		}
	}
</style>
